<template>
  <div class="OrderRefund" v-if="OrderDetail">
    <div
      class="Refund_productInfo"
      v-for="item in OrderDetail.cartInfo"
      :key="item.id"
    >
      <div class="productInfo_left">
        <van-image :src="item.productInfo.image"></van-image>
        <p>{{ item.productInfo.store_name }}</p>
      </div>
      <div class="productInfo_right">
        <span>￥{{ item.productInfo.price }}</span>
        <span>x{{ item.cart_num }}</span>
      </div>
    </div>
    <div class="refundParams">
      <ul>
        <li>
          <span>退货件数</span>
          <span>{{ OrderDetail.total_num }}</span>
        </li>
        <li>
          <span>退款金额</span>
          <span>￥{{ OrderDetail.pay_price }}</span>
        </li>
        <li>
          <span>退款原因</span>
          <span @click="show = true">
            {{ text }}
            <van-icon name="arrow" />
          </span>
        </li>
      </ul>
      <div class="remark">
        <span>备注说明</span>
        <van-field
          v-model="value"
          placeholder="填写备注信息，100字以内"
          input-align="right"
          type="textarea"
          maxlength="100"
          rows="2"
          show-word-limit
        />
      </div>
      <div class="voucher">
        <div class="voucher_tips">
          <span>上传凭证</span>
          <span>(最多可上传3张)</span>
        </div>
        <van-uploader
          v-model="fileList"
          upload-text="上传凭证"
          :max-count="3"
          :after-read="afterRead"
        >
        </van-uploader>
      </div>
    </div>
    <van-button block @click="submitRefund">申请退款</van-button>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      OrderDetail: null,
      refundReason: null,
      value: "",
      show: false,
      text: "选择退款原因",
      fileList: [],
      photo:[],
    };
  },
  methods: {
    onSelect(item) {
      this.show = false;
      this.text = item.name;
    },
    submitRefund() {
      if (this.text == "选择退款原因") {
        this.$toast("请选择退款原因");
      } else {
        this.axios.post('/api/order/refund/verify',{
            refund_reason_wap_explain:this.value,
            text:this.text,
            uni:this.OrderDetail.order_id,
            refund_reason_wap_img:(this.photo.join(","))
        }).then(response=>{
            if(response.data.status == 200){
              this.$router.push({
                path:'/order/detail',
                query:{
                  id:this.OrderDetail.order_id
                }
              })
            }
        })
      }
    },
    afterRead(file) {
      var formData = new FormData();
      formData.append("file", file.file);
      this.axios({
        method: "POST",
        url: "/api/upload/image",
        data: formData,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((response) => {
        this.photo.push(response.data.data.url);
      });
    },
  },
  computed: {
    actions() {
      if (!this.refundReason) return;
      var result = this.refundReason.map((item) => {
        return { name: item };
      });
      return result;
    },
  },
  created() {
    this.axios
      .get("/api/order/detail/" + this.$route.query.id)
      .then((response) => {
        this.OrderDetail = response.data.data;
      });
    this.axios.get("/api/order/refund/reason").then((response) => {
      this.refundReason = response.data.data;
    });
  },
};
</script>

<style lang="less">
.OrderRefund {
  width: 100%;
  .Refund_productInfo {
    width: 100%;
    background-color: #fff;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    .productInfo_left {
      display: flex;
      .van-image {
        width: 60px;
        height: 60px;
        margin-right: 10px;
      }
      > p {
        width: 180px;
        font-size: 14px;
        margin-top: 3px;
        line-height: 19px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
    .productInfo_right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      font-size: 14px;
      color: #999999;
    }
  }
  .refundParams {
    width: 100%;
    background-color: #fff;
    padding: 0 15px;
    margin-top: 10px;
    > ul {
      width: 100%;
      > li {
        width: 100%;
        height: 50px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        > span {
          > .van-icon-arrow {
            vertical-align: -2px;
          }
        }
      }
    }
    .remark {
      display: flex;
      justify-content: space-between;
      padding-top: 15px;
      border-bottom: 1px solid #f0f0f0;
      .van-cell {
        padding-top: 0;
      }
      .van-field {
        width: 210px;
      }
    }
    .voucher {
      width: 100%;
      padding-top: 15px;
      font-size: 14px;
      padding-bottom: 10px;
      .voucher_tips {
        width: 100%;
        display: flex;
        justify-content: space-between;
        span {
          &:nth-child(2) {
            color: #bbbbbb;
          }
        }
      }
      > .van-uploader {
        margin-top: 20px;
        .van-uploader__upload {
          background-color: #fff;
          border: 1px solid #cecece;
        }
      }
    }
  }
  .van-button {
    color: white;
    padding: 0 15px;
    margin-top: 20px;
    .van-button__content {
      background-color: #e93323;
      border-radius: 20px;
    }
  }
  .van-button:active::before {
    opacity: 0;
    border: none;
  }
  .van-button--default {
    background-color: transparent;
  }
}
</style>